<template>
    <div class="todo-list">
      <h2>待办事项</h2>
      <div class="input-container">
        <input 
          type="text" 
          v-model="newTodo" 
          @keyup.enter="addTodo" 
          placeholder="添加新任务..."
        >
        <button @click="addTodo">添加</button>
      </div>
      
      <div v-if="filteredTodos.length === 0" class="empty-state">
        <p>暂无待办事项</p>
      </div>
      
      <ul v-else class="todos">
        <li v-for="todo in filteredTodos" :key="todo.id" :class="{ completed: todo.completed }">
          <input 
            type="checkbox" 
            v-model="todo.completed"
            @change="saveTodos"
          >
          <span>{{ todo.text }}</span>
          <button @click="removeTodo(todo.id)" class="delete-btn">删除</button>
        </li>
      </ul>
      
      <div class="filters">
        <span>筛选: </span>
        <button 
          @click="filter = 'all'"
          :class="{ active: filter === 'all' }"
        >全部</button>
        <button 
          @click="filter = 'active'"
          :class="{ active: filter === 'active' }"
        >未完成</button>
        <button 
          @click="filter = 'completed'"
          :class="{ active: filter === 'completed' }"
        >已完成</button>
        <button 
          v-if="hasCompleted"
          @click="clearCompleted"
          class="clear-btn"
        >清除已完成</button>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, computed } from 'vue'
  
  export default {
    setup() {
      const newTodo = ref('')
      const todos = ref(JSON.parse(localStorage.getItem('todos')) || [])
      const filter = ref('all')
  
      const filteredTodos = computed(() => {
        switch (filter.value) {
          case 'active': return todos.value.filter(todo => !todo.completed)
          case 'completed': return todos.value.filter(todo => todo.completed)
          default: return todos.value
        }
      })
  
      const hasCompleted = computed(() => {
        return todos.value.some(todo => todo.completed)
      })
  
      const addTodo = () => {
        if (newTodo.value.trim() === '') return
        todos.value.push({
          id: Date.now(),
          text: newTodo.value,
          completed: false
        })
        newTodo.value = ''
        saveTodos()
      }
  
      const removeTodo = (id) => {
        todos.value = todos.value.filter(todo => todo.id !== id)
        saveTodos()
      }
  
      const clearCompleted = () => {
        todos.value = todos.value.filter(todo => !todo.completed)
        saveTodos()
      }
  
      const saveTodos = () => {
        localStorage.setItem('todos', JSON.stringify(todos.value))
      }
  
      return {
        newTodo,
        todos,
        filter,
        filteredTodos,
        hasCompleted,
        addTodo,
        removeTodo,
        clearCompleted,
        saveTodos
      }
    }
  }
  </script>
  
  <style scoped>
  .todo-list {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  h2 {
    color: #42b983;
    margin-bottom: 20px;
  }
  
  .input-container {
    display: flex;
    margin-bottom: 20px;
  }
  
  input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
  }
  
  button {
    padding: 10px 15px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
  }
  
  .empty-state {
    padding: 20px;
    color: #888;
    font-style: italic;
  }
  
  .todos {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
  }
  
  .todos li {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .todos li.completed span {
    text-decoration: line-through;
    color: #888;
  }
  
  .todos input[type="checkbox"] {
    margin-right: 10px;
  }
  
  .todos span {
    flex-grow: 1;
  }
  
  .delete-btn {
    background-color: #ff6b6b;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
  }
  
  .delete-btn:hover {
    background-color: #ff5252;
  }
  
  .filters {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #eee;
  }
  
  .filters button {
    margin: 0 5px;
    padding: 5px 10px;
    border-radius: 4px;
    background: none;
    color: #2c3e50;
    border: 1px solid transparent;
  }
  
  .filters button.active {
    border-color: #42b983;
    color: #42b983;
  }
  
  .filters .clear-btn {
    float: right;
    background-color: #ff6b6b;
    color: white;
  }
  
  .filters .clear-btn:hover {
    background-color: #ff5252;
  }
  </style>